<template>
  <div>
    <div class="header">
      <div class="same">
        <div class="hed">
          <div class="i">
            <i class="el-icon-arrow-left" @click="$router.go(-1)"></i>
            <i class="iconfont icon-home" @click="$router.replace('/')"></i>
          </div>
          <p>我的资料</p>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="same">
        <div class="main_xinxi">
          <div class="xinxi">
            <img
              :src="
                users.acatar_url == null
                  ? 'https://tse1-mm.cn.bing.net/th/id/R-C.2ef794f96f679089ebb01f4ce6b2da87?rik=1Dqp8juCKh3rKw&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20200303%2f18%2f1583232918-ilkpCfSLwK.jpeg&ehk=L8EDSWDAtKMlaIKW4ET9sSlFxqRTtGd9HmzNYqM52kw%3d&risl=&pid=ImgRaw&r=0'
                  : `http://192.168.10.23:8888/`+users.acatar_url
              "
              alt=""
            />
            <p>当前登录的账号：{{ users.phone }}</p>
          </div>
          <div class="main_liebiao">
            昵称
            <div>
              <input :placeholder="users.nickname" v-model="user.val" />
            </div>
          </div>
          <div class="main_liebiao">
            性别
            <div>
              <el-radio-group v-model="user.IsSterilization" fill="#eca624">
                <el-radio-button label="男"></el-radio-button>
                <el-radio-button label="女"></el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div class="main_liebiao">
            生日
            <div>
              <el-date-picker
                v-model="user.value1"
                type="date"
                placeholder="选择日期"
                class="ri"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="main_liebiao" @click="show = true">
            所在地
            <div>
              <input placeholder="请选择所在地" v-model="user.adrress" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-action-sheet v-model="show">
      <div class="content">
        <van-area title="标题" @confirm="AList" :area-list="areaList" />
      </div>
    </van-action-sheet>
    <el-button @click="baocuo" class="btn">保存</el-button> 
    <!-- {{this.$store.state.user}} -->
  </div>
</template>
<script>
import { areaList } from "@vant/area-data";
import { updateuser } from "@/api";
export default {
  data() {
    return {
      areaList,
      show: false,
      user: {
        val: "",
        value1: "",
        adrress: "",
        IsSterilization: "1",
      },
    };
  },
  computed: {
    users() {
      return this.$store.state.user;
    },
  },
  methods: {
    AList(data) {
      this.user.adrress = "";
      data.forEach((item) => {
        this.user.adrress += item.name;
      });
      this.show = false;
    },
    baocuo() {
      // console.log(this.user);
      // let usid = "190"
     let yonghu ={
          //  phone:this.$store.state.user.phone,
          nickname:this.user.val,
          userBirth:this.user.value1,
          realname:this.user.adrress,
          // sex:this.user.IsSterilization,
          id:this.$store.state.user.id
        }
      updateuser(yonghu).then((res)=>{
        // console.log(res)  
        
        
      })
    },
  },
};
</script>
<style scoped lang="scss">
.content {
  padding: 16px 16px 160px;
}
.header {
  width: 100%;
  height: 8vh;
  //   background: red;

  .hed {
    width: 100%;
    height: 8vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    .i {
      display: flex;
      align-items: center;
      i {
        margin: 0 2vw;
      }
      .icon-home {
        font-size: 22px;
      }
    }
    p {
      width: 58vw;
    }
  }
}
.main {
  width: 100%;
  height: auto;
  margin-top: 5vh;
  .xinxi {
    width: 100%;
    height: auto;
    text-align: center;
    margin-bottom: 5vh;
    img {
      width: 20vw;
      border-radius: 50%;
    }
  }
  .main_liebiao {
    display: flex;
    margin-left: 5vw;
    height: 8vh;
    line-height: 8vh;
    width: 90vw;
    justify-content: space-between;
    .el-radio-button {
      // margin-right: 10vw;
    }
    input {
      border: none;
      height: 8vh;
      line-height: 8vh;
      text-align: left;
    }
  }
}
.ac {
  background: #eca624;
}
.btn {
  width: 80vw;
  display: block;
  margin: 5vh auto;
  border-radius: 15px;
  background: #eca624;
}
</style>
